<route>
    {
        meta: {
            layout: 'index',
            title:'其他'
        }
    }  
</route>
<template>
    <view>
        <a-row>
            <a-input-search v-model:value="searchKey" placeholder="请输入名称"
                style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="onSearch()" />
            <a-button type="primary" style="margin-bottom: 10px; width: 80px;" @click="add">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>

        <a-card style="padding: 0px 25px 0px 25px;">
            <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
                <template #renderItem="{ item }">
                    <a-list-item key="item.title">
                        <template #actions>
                            <!-- <span v-for="{ icon, text } in actions" :key="icon">
                                <component :is="icon" style="margin-right: 8px" />
                                {{ text }}
                            </span> -->
                            <div style="margin-right: 8px;">
                                <span v-if="editableData[item.id]">
                                    <a-button type="link" @click="save(item.id)">保存 </a-button>
                                    <a-popconfirm title="取消编辑 ?" @confirm="cancel(item.id)">
                                        <a-button type="link">取消</a-button>
                                    </a-popconfirm>
                                </span>
                                <span v-else>
                                    <a-button type="link" @click="editItem(item)">
                                        <FormOutlined />
                                    </a-button>
                                    <a-popconfirm title="确定删除该条记录 ?" @confirm="del(item.id)">
                                        <a-button type="link" danger>
                                            <DeleteOutlined />
                                        </a-button>
                                    </a-popconfirm>
                                </span>
                            </div>
                        </template>
                        <template #extra>
                            <img width="272" alt="logo"
                                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
                        </template>
                        <a-list-item-meta :title="item.title">
                            <template #description>
                                <a :href="item.href">{{ item.description }}</a>
                            </template>
                        </a-list-item-meta>
                        {{ item.content }}
                    </a-list-item>
                </template>
            </a-list>
        </a-card>
        
        <AntdConfirmModal :title='title ? "新增公告" : "修改公告"' ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 5 }">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="标题" name="title">
                            <a-input v-model:value="form.title" style="width: 400px;" placeholder="请输入标题" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="链接" name="href">
                            <a-input v-model:value="form.href" style="width: 400px;" placeholder="请输入链接" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="上传图片" name="image">
                            <a-upload v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                list-type="picture" class="upload-list-inline">
                                <a-button style="width: 200px;">
                                    <upload-outlined />upload
                                </a-button>
                            </a-upload>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { PlusOutlined, UploadOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
const editableData = reactive({});
const modalRef = ref(null);
const title = ref(null);
const listData = ref([]);
const form = ref({
    title: '',
    href: '',
    image: '',
});
const fileList = ref();
for (let i = 0; i < 5; i++) {
    listData.value.push({
        href: 'https://www.antdv.com/',
        title: `标题 ${i}`,
        description: 'Ant Designis refined by Ant UED Team.',
        content: 'We supply a series of design principles'
    });
}
const pagination = {
    onChange: page => {
        console.log(page);
    },
    pageSize: 3,
};
//编辑
function editItem(e) {
    form.value = e
    title.value = false
    modalRef.value.openModal()
}
// 删除
const del = key => {
    delete editableData[key];
}
// 保存
const save = key => {
    delete editableData[key];
};
// 取消
const cancel = key => {
    delete editableData[key];
};
// 新增
function add() {
    title.value = true
    form.value = {}
    modalRef.value.openModal()
}
// 提交
function submitForm() {
    console.log(listData.value);
}
// 搜索
function onSearch() {

}
</script>
<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
    float: left;
    width: 200px;
    margin-right: 8px;
}

.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
    float: right;
}
</style>